<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleClick">
        <el-menu-item index="99">
          {{ $t('table.all') }}
        </el-menu-item>
        <el-menu-item index="0">{{ $t('table.Unpaid') }}</el-menu-item>
        <el-menu-item index="1">已支付</el-menu-item>
        <el-menu-item index="6">已激活</el-menu-item>
        <el-menu-item index="8">已完成</el-menu-item>
        <el-menu-item index="5">{{ $t('table.CLOSED') }}</el-menu-item>
      </el-menu>
      <!-- 搜索筛选 -->
      <el-row :gutter="20" style="margin-top:20px">
        <el-col :span="3">
          <el-input v-model="query.ordernum" type="text" :placeholder="$t('table.ordernum')" />
        </el-col>
        <el-col :span="3">
          <el-input v-model.number="query.mid" type="text" :placeholder="$t('table.mid')" />
        </el-col>
        <el-col :span="4">
          <el-date-picker v-model="query.createtime_s" type="datetime" placeholder="最早下单时间" style="width: 100%;" format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss" />
        </el-col>
        <el-col :span="4">
          <el-date-picker v-model="query.createtime_e" type="datetime" placeholder="最晚下单时间" style="width: 100%;" format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss" />
        </el-col>
        <el-col :span="3">
          <el-select v-model.number="query.paytypeid" style="width: 100%;" :placeholder="$t('table.selectThe')+$t('table.paytypeid')">
            <el-option :value="1" label="微信支付" />
            <el-option :value="2" label="余额支付" />
          </el-select>
        </el-col>
        <el-col :span="3">
          <el-button type="primary" icon="el-icon-search" @click="search">{{ $t('button.search') }}</el-button>
        </el-col>
      </el-row>
      <el-table v-loading="downLoadLoading" border :data="list" max-height="620px" style="margin-top: 20px;">
        <el-table-column label="ID" prop="id" sortable="custom" width="60" align="center" />
        <el-table-column :label="$t('table.commodity_information')" prop="shop_goods" width="300">
          <template slot-scope="{row}">
            <div class="shopGoods-item">
              <div class="shopGoos_img"><img :src="row.fu_tao[0].pic" width="100%"></div>
              <div class="shopGoos_wen">
                <p style="font-weight: bold;">{{ row.fu_tao[0].name }}</p>
                <p>规格：{{ row.ggname }}</p>
                <p class="goodsPrice">¥ {{ row.fu_tao[0].product_price }} x  {{ row.num }}</p>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column :label="$t('table.ordernum')" prop="ordernum" width="180" align="center" />
        <el-table-column :label="$t('table.Order_time')" prop="createtime" width="160" align="center">
          <template slot-scope="{row}">
            {{ row.createtime|timeStanp }}
          </template>
        </el-table-column>
        <el-table-column :label="$t('table.product_price')" prop="product_price" align="center" width="130">
          <template slot-scope="{row}">
            ¥ {{ row.product_price }}
          </template>
        </el-table-column>
        <el-table-column :label="$t('table.totalprice')" prop="totalprice" align="center" width="130">
          <template slot-scope="{row}">
            ¥ {{ row.totalprice }}
          </template>
        </el-table-column>
        <el-table-column :label="$t('table.state')" prop="status" align="center" width="150">
          <template slot-scope="{row}">
            <el-tag :type="row.status|statusFilter">
              {{ row.status|OrderStatusData }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column :label="$t('table.user_pic')" prop="user_pic" align="center" width="150">
          <template slot-scope="{row}">
            <div class="shopGoos_img"><img :src="row.user_pic" width="50%"></div>
            <p>{{ row.user_name }}</p>
          </template>
        </el-table-column>
        <el-table-column :label="$t('table.paytypeid')" prop="paytype" align="center" width="150" />
        <el-table-column :label="$t('table.platform')" prop="platform" align="center" width="100" />
        <el-table-column :label="$t('table.beizhu')" prop="message" align="center" width="180" />
        <el-table-column :label="$t('table.actions')" align="center" width="190">
          <template slot-scope="{row}">
            <el-button icon="el-icon-tickets" type="success" size="mini" style="margin-bottom: 10px;" @click="open('show',row)">{{ $t('button.show') }}</el-button>
            <!-- <el-button icon="el-icon-delete" size="mini" :disabled="!checkPermission('orderfu-del')" @click="delOrder(row)">{{ $t('button.delete') }}</el-button> -->
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-row type="flex" align="middle" style="margin-top:20px">
        <el-pagination background layout="total,prev,pager,next" :total="count" :page-size="query.limit" :current-page="query.page" @current-change="changPage" />
      </el-row>
    </div>
    <!-- 详情 -->
    <el-dialog :title="$t('table.Details')" width="650px" :visible="showDialog" top="30px" @close="btnCanle">
      <div class="shopOrder-dialog">
        <div class="shop-box">
          <div class="shop-item">
            <div class="shop-left"><img :src="showData.fu_tao[0].pic" width="100%"></div>
            <div class="shop-right">
              <p style="font-weight: bold;">{{ showData.fu_tao[0].name }}</p>
              <p>规格：{{ showData.ggname }}</p>
              <p class="goodsPrice">¥ {{ showData.fu_tao[0].product_price }} x  {{ showData.num }}</p>
            </div>
          </div>
          <div>
            <table class="ljm-table" cellspacing="0" cellpadding="0">
              <thead>
                <tr>
                  <th>服务名称</th>
                  <th>次数</th>
                  <th>已用次数</th>
                  <th>单次价</th>
                  <th>服务人员单次价</th>
                </tr>
              </thead>
              <tbody>
                <tr v-for="(item,index) in showData.fu_xiang" :key="index">
                  <td>{{ item.name }}</td>
                  <td>{{ item.num }}</td>
                  <td>{{ item.y_num }}</td>
                  <td>{{ item.sell_price }}</td>
                  <td>{{ item.cost_price }}</td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
        <el-divider />
        <ul class="order_information">
          <li>
            <label>{{ $t('table.OrderingUsers') }}</label>
            <div class="information-right">
              <p class="information-img"><img :src="showData.user_pic" width="100%"></p>
              <p>{{ showData.user_name }}</p>
            </div>
          </li>
          <li>
            <label>{{ $t('table.mid') }}</label>
            <div class="information-right">
              <p>{{ showData.mid }}</p>
            </div>
          </li>
          <li>
            <label>{{ $t('table.ordernum') }}</label>
            <div class="information-right">
              <p>{{ showData.ordernum }}</p>
            </div>
          </li>
          <li>
            <label>下单时间</label>
            <div class="information-right">
              <p>{{ showData.createtime|timeStanp }}</p>
            </div>
          </li>
          <li>
            <label>支付时间</label>
            <div class="information-right">
              <p>{{ showData.paytime|timeStanp }}</p>
            </div>
          </li>
          <li>
            <label>{{ $t('table.paytypeid') }}</label>
            <div class="information-right">
              <p>{{ showData.paytype }}</p>
            </div>
          </li>
          <li>
            <label>{{ $t('table.product_price') }}</label>
            <div class="information-right">
              <p>¥ {{ showData.product_price }}</p>
            </div>
          </li>
          <li v-if="showData.scoredk_money>0">
            <label>积分抵扣金额</label>
            <div class="information-right">
              <p>¥ {{ showData.scoredk_money }}</p>
            </div>
          </li>
          <li v-if="showData.leveldk_money>0">
            <label>会员等级优惠金额</label>
            <div class="information-right">
              <p>¥ {{ showData.leveldk_money }}</p>
            </div>
          </li>
          <li v-if="showData.coupon_money>0">
            <label>优惠券金额</label>
            <div class="information-right">
              <p>¥ {{ showData.coupon_money }}</p>
            </div>
          </li>
          <li>
            <label>{{ $t('table.totalprice') }}</label>
            <div class="information-right">
              <p>¥ {{ showData.totalprice }}</p>
            </div>
          </li>
          <li>
            <label>捐助金额</label>
            <div class="information-right">
              <p>¥ {{ showData.juan_price }}</p>
            </div>
          </li>
          <li>
            <label>{{ $t('table.state') }}</label>
            <div class="information-right">
              <p> {{ showData.status|OrderStatusData }}</p>
            </div>
          </li>
          <li>
            <label>用户备注</label>
            <div class="information-right">
              <p>{{ showData.message }}</p>
            </div>
          </li>
          <li>
            <label>后台备注</label>
            <div class="information-right" style="width: 80%;">
              <el-input
                v-model="showData.remark"
                type="textarea"
                :rows="3"
                placeholder="请输入内容"
              />
            </div>
          </li>
        </ul>
      </div>
      <div slot="footer" class="dialog-footer">
        <!-- <el-button @click="open('beizhu',showData)">{{ $t('button.beizhu') }}</el-button> -->
        <el-button :disabled="!checkPermission('orderfu-show')" type="warning" @click="remark">确定备注</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { GetFuOrderList, EditFuOrderRemark } from '@/api/user'
import user from '@/store/modules/user'
export default ({
  filters: {
    statusFilter(status) {
      const statusMap = {
        1: 'success',
        0: 'danger',
        8: 'warning',
        5: 'info'
      }
      return statusMap[status]
    }
  },
  data() {
    return {
      activeIndex: '99',
      downLoadLoading: false,
      mid: undefined,
      query: {
        status: 99,
        ordernum: '',
        mid: undefined,
        paytypeid: undefined,
        createtime_s: '',
        createtime_e: '',
        aid: 1,
        page: 1,
        limit: 10
      },
      list: [],
      count: 0,
      showDialog: false,
      formData: {
        id: undefined,
        mid: undefined,
        ordernum: '',
        remark: ''
      },
      showData: {
        fu_tao: [{ pic: '' }],
        fu_xiang: []
      }
    }
  },
  created() { // 获取userid
    this.mid = parseFloat(user.state.userId)
    this.formData.mid = parseFloat(user.state.userId)
    this.getShopOrderList()
  },
  methods: {
    // 提交备注
    async remark() {
      const one = {
        id: this.showData.id,
        remark: this.showData.remark,
        aid: this.showData.aid
      }
      try {
        await this.$confirm('确定要修改备注吗？')
        await EditFuOrderRemark(one)
        // // 更新数据
        this.getShopOrderList()
        this.btnCanle()
        this.$message.success(this.$t('prompt.success'))
      } catch (error) {
        this.$message.error(error)
      }
    },

    // 打开弹框
    open(type, row) {
      if (type === 'show') {
        this.showData = row
        console.log(this.showData)
        this.showDialog = true
      }
    },
    // 监听tab点击事件
    handleClick(tab, event) {
      this.query.status = parseFloat(tab)
      this.query.page = 1
      this.getShopOrderList()
    },
    // 分页
    changPage(newPage) {
      this.query.page = newPage
      this.getShopOrderList()
    },
    // 搜索
    search() {
      this.query.page = 1
      this.getShopOrderList()
    },
    // 关闭
    btnCanle() {
      this.showDialog = false
      this.formData.remark = ''
      this.formData.id = undefined
      this.formData.ordernum = ''
      this.showData = {
        fu_tao: [{ pic: '' }],
        fu_xiang: []
      }
    },
    // 获取订单
    async getShopOrderList() {
      this.downLoadLoading = true
      if (this.query.mid < 1) {
        this.query.mid = undefined
      }
      const { list, count } = await GetFuOrderList(this.query)
      this.list = list
      this.count = count
      this.downLoadLoading = false
    }
  }
})
</script>
<style scoped lang="scss">
.shopGoods-item{
  display: flex;
  margin-bottom: 15px;
  .shopGoos_img{
    width: 80px;
    margin-right: 10px;
  }
  .shopGoos_wen{
    width: 200px;
    font-size: 12px;
    line-height: 18px;
    p{
      margin: 0;
    }
  }
  .goodsPrice{
    color: #f60;
    margin-top: 20px;
  }
}
.address-box{
  display: flex;
  align-items: center;
  .address-icon{
    width: 30px;
    margin-right: 20px;
  }
  .address-wen{
    display: flex;
    align-items: center;
    h1{
      font-size: 16px;
      margin-right: 10px;
    }
  }
  .address-area{
    p{
      margin: 0;
    }
  }
}
.shop-item{
  display: flex;
  margin-bottom: 20px;
  .shop-left{
    width: 100px;
    margin-right: 20px;
  }
  .shop-right{
    width:500px;
    p{
      margin: 0;
    }
    .goodsPrice{
      color: #f60;
      margin-top: 10px;
    }
  }
}
.order_information{
  padding-left: 0;
  margin: 0;
  li{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    border-bottom: 1px solid #f2f2f2;
    padding:0 0 15px 0;
    .information-right{
      display: flex;
      justify-content: right;
      align-items: center;
      p{
        margin: 0;
      }
      .information-img{
        width: 40px;
        margin-right: 10px;
      }
    }

  }
}
.shopOrder-dialog{
  height: auto;
  max-height: 650px;
  overflow-y: auto;
}
.shopOrder-dialog::-webkit-scrollbar{display:none}
.color-red{
  color: #f60;
}
.form-pic-box{
  display: flex;
  margin-top: 20px;
  .formPic{
    margin-right: 10px;
  }
}
.ljm-table{
  thead{
    tr{
      background-color: #f2f2f2;
      th{
        border-width: 1px;
        border-style: solid;
        border-color: #e6e6e6;
        position: relative;
        padding: 9px 15px;
        min-height: 20px;
        line-height: 20px;
        font-size: 14px;
        text-align: left;
      }
    }
  }
  tbody{
    tr{
      margin-top: -1px;
      td{
        position: relative;
        padding: 9px 15px;
        min-height: 20px;
        line-height: 20px;
        font-size: 14px;
        border-width: 1px;
        border-style: solid;
        border-color: #e6e6e6;
        .layui-input{
          display: inline;
          height: 30px;
          padding-left: 10px;
          line-height: 1.3;
          border-width: 1px;
          border-style: solid;
          background-color: #fff;
          border-radius: 2px;
          border-color: #e6e6e6;
        }
        div{
          margin: 5px 0px;
          .layui-btn-sm{
            height: 30px;
            line-height: 30px;
            padding: 0 10px;
            font-size: 12px;
            margin-left: 5px;
          }
          .layui-btn-primary{
            border: 1px solid #C9C9C9;
            background-color: #fff;
            color: #555;
          }
          .layui-btn {
              display: inline-block;
              white-space: nowrap;
              text-align: center;
              border-radius: 2px;
              cursor: pointer;
          }
        }
      }
    }
  }
}
</style>
